<template>
  <div id="invitedShare">
    <p class="perTitle" style="border: none;"><i></i><span>邀请分享</span></p>
      <textarea class="copyContent" id="clone" >{{copyContent}}</textarea>
      <p class="copyT" >复制上面内容发送给好友，好友成功注册后即可获得U币</p>
      <div class="Btn" style="text-align: right"><el-button type="success" size='small' data-clipboard-action="copy" data-clipboard-target="#copyContent" @click="copy">复制</el-button></div>
      <div class="bdsharebuttonbox">
          <a href="#" class="bds_more" data-cmd="more"></a>
          <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
          <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
          <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
          <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
          <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
      </div>
  </div>
</template>

<script>
export default {
  name: 'invitedShare',
  data () {
    return {
      copyContent: '',
      aurl: []
    };
  },
  beforeCreate () {
    window._bd_share_main = '';
  },
  mounted () {
    this.invite();
    this.$nextTick(() => { this.bdshare(); });
  },
  methods: {
    copy () {
      this.invitShow = false;
      let Url = document.getElementById('clone');
      Url.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      if (document.execCommand('Copy')) {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      } else {
        this.$message({
          message: '若复制失败，请手动复制',
          type: 'warning'
        });
      }
    },
    invite (sulg) {
      this.axios.get('task/inviteContent/invite')
        .then(({data}) => {
          if (data.code === 200) {
            this.copyContent = data.data.content;
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    bdshare () {
      this.axios.get('task/shareUrl/share')
        .then(({data}) => {
          if (data.code === 200) {
            this.aurl = data.data.url;
            this.setup();
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    setup () {
      window._bd_share_config = {
        'common': {
          'bdSnsKey': {},
          'bdText': '',
          'bdMini': '2',
          'bdMiniList': false,
          'bdPic': '',
          'bdStyle': '0',
          'bdSize': '32',
          'bdUrl': this.aurl,
          'onAfterClick': function () {
            this.axios.post('/api/task/exec/share')
              .then(({data}) => {});
          }
        },
        'share': {},
        image: [{
          tag: 'baidu',
          viewType: 'list',
          viewPos: 'top',
          viewColor: 'black',
          viewSize: '32',
          viewList: ['qzone', 'tsina', 'huaban', 'tqq', 'renren']
        }]
      };
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
      document.body.appendChild(s);
    }
  }
};
</script>

<style lang="scss">
  #invitedShare {
    .perTitle{
    /*padding: 10px 0;*/
   height: 40px;
    border-bottom: 1px solid #dfdfdf;
    font-size: 16px;
}
.perTitle i{
    width: 5px;
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    background-color: #10a57d;
    line-height: 40px;
    margin:0 10px;
}
.copyContent{
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    height: 120px;
    padding: 15px;
    word-break: break-all;
    width: 95%;
    resize: none;
}
.copyT{
    color: #c4c4c4;
    font-size: 12px;
    margin-top: 10px;
}
.Btn{
    text-align: center;
    margin-top: 20px;
}
.Btn button{
    background-color: #10a57d;
    color: #fff;
    padding: 6px 50px;
    border-radius: 3px;
    border: none;
    font-size: 16px;
}
.organColor{
    color: #f16027;
}
  }
</style>
